<template>
<div class="page-container">
    <div class="toolbar">
        <el-row>
            <el-tabs type="border-card">
                <el-tab-pane label="基本信息">
                    <el-form :inline="true" :model="dataForm" label-width="200px" style="padding-top:20px" ref="dataForm" :rules="dataFormRules" :disabled="this.$route.query.disabled" class="form">
                        <el-row style="margin-top: -20px;">
                            <el-divider content-position="center">
                                <span style="font-size:16px;font-weight:800">基本信息</span>
                            </el-divider>
                            <el-form-item label="BD编码" prop="bdCode">
                              <el-input v-model="dataForm.code" placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item label="第三方名称" prop="name">
                               <el-input v-model="dataForm.name" placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item label="汇率" >
                                <el-input v-model="dataForm.exchangeRate"  placeholder="请输入汇率" type="number" :min="0" oninput="if(value<0)value=0"></el-input>
                            </el-form-item>
                            <el-form-item label="负责人姓名" prop="chargeName">
                                <el-input v-model="dataForm.chargeName" placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item label="负责人邮箱" prop="chargeEmail">
                                <el-input v-model="dataForm.chargeEmail" placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item label="负责人手机号" prop="chargePhone">
                                <el-input v-model="dataForm.chargePhone" placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item label="营业执照注册日期" prop="businessLicenseRegistrationDate">
                                <el-date-picker v-model="dataForm.businessLicenseRegistrationDate" type="date" :picker-options="pickerOptions" placeholder="营业执照注册日期">
                                </el-date-picker>
                            </el-form-item>

                            <el-form-item label="营业执照过期日期" prop="businessLicenseExpiryDate">
                                <el-date-picker v-model="dataForm.businessLicenseExpiryDate" type="date" placeholder="营业执照注册日期">
                                </el-date-picker>
                            </el-form-item>
                              <el-form-item label="注册资本(万)" >
                                <el-input v-model="dataForm.registeredCapital" placeholder="请输入注册资本(万)"  type="number" :min="0" oninput="if(value<0)value=0"></el-input>
                            </el-form-item>


                            <el-form-item label="法人姓名" prop="legalerName">
                                <el-input v-model="dataForm.legalerName" placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item label="统一社会信用代码" prop="uniformSocialCreditCode">
                                <el-input v-model="dataForm.uniformSocialCreditCode" placeholder="请输入"></el-input>
                            </el-form-item>
                             <el-form-item label="企业性质" prop="enterpriseProperty">
                                <!-- <template slot-scope="scope">
                                  <el-input :value="enterpriseProperty[searchFilters.enterpriseProperty]"></el-input>
                                </template> -->
                                <!-- <el-input v-model="searchFilters.enterpriseProperty" placeholder="请输入企业性质"></el-input> -->
                             <el-select v-model="dataForm.enterpriseProperty" clearable placeholder="请选择类型">
                                    <el-option label="请选择类型" value="0"></el-option>
                                    <el-option label="有限责任公司（自然人独资）" value="1"></el-option>
                                    <el-option label="其他有限责任公司" value="2"></el-option>
                                    <el-option label="其他股份有限公司（非上市）" value="3"></el-option>
                                    <el-option label="有限责任公司（自然人投资或控股的法人独资）" value="4"></el-option>
                                    <el-option label="有限责任公司（法人独资）" value="5"></el-option>
                                    <el-option label="有限责任公司（自然人独资）" value="6"></el-option>
                                    <el-option label="有限责任公司" value="7"></el-option>
                                    <el-option label="分公司" value="8"></el-option>
                                    <el-option label="有限责任公司（自然人投资或控股）" value="9"></el-option>
                                    <el-option label="有限责任公司（外国法人独资）" value="10"></el-option>
                                    <el-option label="有限责任公司（台港澳合资）" value="11"></el-option>
                                    <el-option label="有限责任公司（自然人投资或控股）（1130）" value="12"></el-option>
                                    <el-option label="个人工商及其他" value="13"></el-option>
                                    <el-option label="外商独资" value="14"></el-option>
                                    <el-option label="民营企业" value="15"></el-option>
                                    <el-option label="上市公司" value="16"></el-option>
                                    <el-option label="国有企业" value="17"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="行业类型" prop="industryType">
                                <!-- <el-input v-model="dataForm.industryType" placeholder="请输入"></el-input> -->
                                <el-select v-model="dataForm.industryType" clearable placeholder="请选择类型">
                                      <el-option label="请选择类型" value="0"></el-option>
                                    <el-option label="农业" value="1"></el-option>
                                    <el-option label="科技推广和应用服务业" value="2"></el-option>
                                    <el-option label="零售业" value="3"></el-option>
                                    <el-option label="批发业" value="4"></el-option>
                                    <el-option label="农副食品加工业" value="5"></el-option>
                                    <el-option label="食品制造业" value="6"></el-option>
                                    <el-option label="商务服务业" value="7"></el-option>
                                    <el-option label="银行证券保险支付等金融业）" value="8"></el-option>
                                </el-select>
                            </el-form-item>


                             <el-form-item label="法人证件类型" prop="legalerCertificateType">
                                <!-- <el-input v-model="searchFilters.legalerCertificateType" placeholder="请输入法人证件类型"></el-input> -->
                                <el-select v-model="dataForm.legalerCertificateType" clearable placeholder="请选择类型">
                                      <el-option label="请选择类型" value="0"></el-option>
                                    <el-option label="港澳通行证" value="1"></el-option>
                                    <el-option label="护照" value="2"></el-option>
                                    <el-option label="士兵证" value="3"></el-option>
                                    <el-option label="军官证" value="4"></el-option>
                                    <el-option label="户口本" value="5"></el-option>
                                    <el-option label="身份证" value="6"></el-option>
                                </el-select>

                            </el-form-item>
                           <el-form-item label="法人证件号码" prop="legalerCertificateNo">
                                <el-input v-model="dataForm.legalerCertificateNo" placeholder="请输入法人证件号码"></el-input>
                            </el-form-item>

                            <el-form-item label="法人证件过期日" prop="legalerCertificateExpiryDate">
                                <el-date-picker v-model="dataForm.legalerCertificateExpiryDate" type="date" placeholder="营业执照注册日期">
                                </el-date-picker>
                            </el-form-item>
                          <el-form-item label="开始日期"  prop="startTime" >
                            <!-- <el-input v-model="dataForm.startTime" placeholder="请输入"></el-input> -->
                            <el-date-picker v-model="dataForm.startTime" type="datetime" placeholder="请选择开始日期"></el-date-picker>
                          </el-form-item>
                          <el-form-item label="结束日期"  prop="endTime" >
                            <!-- <el-input v-model="dataForm.endTime" placeholder="请输入"></el-input> -->
                            <el-date-picker v-model="dataForm.endTime" type="datetime" placeholder="请选择结束日期"></el-date-picker>
                          </el-form-item>
                          <el-form-item label="法人证件照" prop="legalerCertificateImg">
                            <el-upload :action="imgUpload" list-type="picture-card" :on-success="handlePicSuccess" v-model="dataForm.legalerCertificateImg" :on-exceed="handleExceed" accept="image/gif, image/jpeg, image/jpg, image/png, image/svg" :on-remove="handlePicRemove" :limit="picLimit" style="float:left" ref="pic_upload" :file-list="picList">
                              <i class="el-icon-plus"></i>
                            </el-upload>
                          </el-form-item>
                        </el-row>
                    </el-form>
                    <div class="tool-wrap">
                        <div class="left-area">
                            <el-button-group>
                                <el-button type="primary" size="small" @click="submitForm()" v-show="!this.$route.query.disabled">保存</el-button>
                                <el-button type="primary" size="small" @click="$router.go(-1)">取消</el-button>
                            </el-button-group>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-row>
    </div>
</div>
</template>

<script>
//一.导包区
import jicTable from "@/components/jicComponentGallery/jicTable";
import { mapState } from "vuex";
import ThemePicker from "@/components/ThemePicker";
import LangSelector from "@/components/LangSelector";
import VDistpicker from "v-distpicker";
import elTree from "@/views/tree/src/tree.vue";

//二.数据输出区
export default {
  //2.1 注册组件
  components: {
    jicTable,
    ThemePicker,
    LangSelector,
    VDistpicker,
    elTree
  },

  //2.2 数据初始化区
  data() {
    return {
      pickerOptions:{                                 //禁用当前日期之前的日期
          disabledDate(time) {
          //Date.now()是javascript中的内置函数，它返回自1970年1月1日00:00:00 UTC以来经过的毫秒数。
              return time.getTime() > Date.now() - 8.64e7;
          },
      },
      //2.2.1 公共数据初始化
      searchSize: "mini",
      imgUpload: this.utils.imgUploadUrl,
      picLimit: 1, //图片最多可以添加多少个
      picList:[],

      // 2.2.2 form 表单数据初始化
      dataForm: {
        id: null,
        deptId: null,
        code: null,
        name: null,
        total: null,
        available: null,
        frozen: null,
        exchangeRate: null,
        chargeName: null,
        chargeEmail: null,
        chargePhone: null,
        businessLicenseRegistrationDate: null,
        businessLicenseExpiryDate: null,
        businessLicenseImg: null,
        enterpriseProperty: "0",
        legalerName: null,
        legalerCertificateType: "0",
        legalerCertificateNo: null,
        legalerCertificateExpiryDate: null,
        legalerCertificateImg: null,
        uniformSocialCreditCode: null,
        registeredCapital: null,
        industryType: "0",
        sts: null,
        startTime: null,
        endTime: null
      },
      //trigger 为blur 表示丢失焦点;为change 表示值发生变化;
      dataFormRules: {
        code: [
          {
            required: true,
            message: "请输入编码",
            trigger: "blur"
          }
        ],
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur"
          }
        ],
        exchangeRate: [
          {
            required: true,
            message: "请输入汇率",
            trigger: "blur"
          }
        ],
        chargeName: [
          {
            required: true,
            message: "请输入负责人姓名",
            trigger: "blur"
          }
        ],
        chargeEmail: [
          {
            required: true,
            message: "请输入负责人邮箱",
            trigger: "blur"
          },
          {
            min: 5,
            max: 30,
            message: "长度在 5 到 30 个字符",
            trigger: "blur"
          },
          {
            type: "email",
            message: "请输入正确的负责人邮箱地址",
            trigger: ["blur"]
          }
        ],
        chargePhone: [
          {
            required: true,
            message: "请输入负责人手机号",
            trigger: "blur"
          },
          {
            min: 11,
            max: 11,
            message: "请输入11位正确手机号码",
            trigger: "blur"
          },
          {
            pattern: /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        businessLicenseRegistrationDate: [
          {
            required: true,
            message: "请输入营业执照注册日期",
            trigger: "blur"
          }
        ],
        businessLicenseExpiryDate: [
          {
            required: true,
            message: "请输入营业执照过期日",
            trigger: "blur"
          }
        ],
        businessLicenseImg: [
          {
            required: true,
            message: "请输入营业执照图片",
            trigger: "blur"
          }
        ],
        enterpriseProperty: [
          {
            required: true,
            message: "请输入企业性质",
            trigger: "blur",

          }
        ],
        legalerName: [
          {
            required: true,
            message: "请输入法人姓名",
            trigger: "blur"
          }
        ],
        legalerCertificateType: [
          {
            required: true,
            message: "请输入法人证件类型",
            trigger: "blur",

          }
        ],
        legalerCertificateNo: [
          {
            required: true,
            message: "请输入法人证件号码",
            trigger: "blur"
          }
        ],
        legalerCertificateExpiryDate: [
          {
            required: true,
            message: "请输入法人证件过期日",
            trigger: "blur"
          }
        ],
        legalerCertificateImg: [
          {
            required: true,
            message: "请输入法人证件照",
            trigger: "blur"
          }
        ],
        uniformSocialCreditCode: [
          {
            pattern:/^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
            required: true,
            message: "请输入15-18位统一社会信用代码",
            trigger: "blur"
          }
        ],
        registeredCapital: [
          {
            required: true,
            message: "请输入注册资本（万元）",
            trigger: "blur"
          }
          // ,
          // {
          //     min: 3,
          //     max: 5,
          //     message: "长度在 0 到 20 个字符",
          //     trigger: "blur"
          // }
        ],
        industryType: [
          {
            required: true,
            message: "请输入行业类型",
            trigger: "blur",

          }
          // {
          //     min: 3,
          //     max: 5,
          //     message: "长度在 0 到 20 个字符",
          //     trigger: "blur"
          // },
        ],
        startTime: [
          {
            required: true,
            message: "请选择开始时间",
            trigger: "blur"
          }
        ],
        endTime: [
          {
            required: true,
            message: "请选择结束时间",
            trigger: "blur"
          }
        ]
      }
      //dialogVisible: false, //// 是否显示弹窗内容;
      //editDialogVisible1: false,//// 是否可编辑弹窗内容;
      //editLoading: false,////是否显示加载时动画效果;
    }; //return 完结;
  }, //data()方法 完结;
    watch: {
        'dataForm.legalerCertificateImg'(newVal, OblVal) {
            if (newVal != null || newVal != undefined) {
                let obj = new Object();
                obj.url = newVal;
                this.picList.push(obj);
            }
        },
    },

  //2.3 Vue 方法区
  methods: {
    getNowTime() {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      var date = now.getDate(); //得到日期
      var hour = now.getHours(); //得到日期
      var minute = now.getMinutes(); //得到日期
      var second = now.getSeconds(); //得到日期
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      var endYear = year + 10;
     var endTime = endYear+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
      //dataForm.startTime
    /*   this.$set(this.dataForm, "startTime", startTime);
      this.$set(this.dataForm, "endTime", endTime); */
      let this_= this;
      this_.dataForm.startTime = now;
      this_.dataForm.endTime = endTime;
    },
    //获取部门信息
    // getDeptName() {
    //   let this_ = this;
    //   //let param = this.dataForm;
    //   this.utils.request.DepartmentNameInquiry({}, function(res) {
    //     this_.deptList = res.data;
    //     console.log(this_.deptList);
    //   });
    // },
    //2.3.1 公共方法区

    //文件上传数量限制
    handleExceed: function() {
      this.$alert("每个图片框最多上传1张图片", "警告", {
        confirmButtonText: "确定"
      });
    },

    handlePicSuccess: function(res, file) {
      if (res.code == "0000") {
        this.dataForm.legalerCertificateImg = res.data.imgUrl;
        let imgUrl = {};
        imgUrl.url = res.data.imgUrl;
      }
    },

    handlePicRemove(file, picList) {
      if (picList && picList.length == 0) {
        this.dataForm.legalerCertificateImg = null;
      }
      this.picList3 = picList;
    },
    //2.请求列表数据
    getDetail() {
      let this_ = this;
      if (
        this.$route.query != null &&
        this.$route.query.id != null &&
        this.$route.query.id != "" &&
        this.$route.query.id != "null" &&
        this.$route.query.id != "undefined"
      ) {
        let params = {};
        params.id = this.$route.query.id;
        if (this.$route.query.activeName == "second") {
        //申请表编辑
          this.utils.request.getConfThirdPartApplyDetail(params, function(res) {
            if (res.code === "0000") {
              this_.dataForm = res.data;
            } else {
              this_.$message({
                message: "操作失败, " + res.msg,
                type: "error"
              });
            }
          });
        }else{
          //主表
          this.utils.request.getConfThirdPartDetail(params, function(res) {
            if (res.code === "0000") {
              this_.dataForm = res.data;
            } else {
              this_.$message({
                message: "操作失败, " + res.msg,
                type: "error"
              });
            }
          });

        }
        } else {
         this.getNowTime();
      }
    },

    submitForm: function() {
      let this_ = this;
      this_.$refs.dataForm.validate(valid => {
        if (valid) {
          if (
            this_.dataForm.businessLicenseRegistrationDate >
            this_.dataForm.businessLicenseExpiryDate
          ) {
            this_.$message({
              message: "营业执照过期时间不能小于营业执照注册时间",
              type: "error"
            });
            return;
          }
          var date = new Date();
          if (this_.dataForm.businessLicenseRegistrationDate > date) {
            this_.$message({
              message: "请选择正确的营业执照时间",
              type: "error"
            });
            return;
          }
          this_.$confirm("确认提交吗？", "提示", {}).then(() => {
            this_.editLoading = true;
            let params = this.dataForm;
            if(this.$route.query.activeName == "second"){
              this_.utils.request.saveConfThirdPartApply(params, function(res) {
              if (res.code === "0000") {
                this_.$message({
                  message: "操作成功",
                  type: "success"
                });
              } else {
                this_.$message({
                  message: "操作失败",
                  type: "error"
                });
              }
            });
            this_.$router.go(-1);
            }else{
               this_.utils.request.saveConfThirdPart(params, function(res) {
              if (res.code === "0000") {
                this_.$message({
                  message: "操作成功",
                  type: "success"
                });
              } else {
                this_.$message({
                  message: "操作失败",
                  type: "error"
                });
              }
            });
            this_.$router.go(-1);
            }

          });
        }
      });
    },
    // 7.页面弹窗处理方法
    add() {
      this.dialogVisible = true;
    },

    // 8.关闭弹窗
    handleClose() {
      this.dialogVisible = false;
    },

    /*图片预览*/
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    /*图片移除*/
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    back() {
      this.$router.go(-1);
    }
    //==========2.3.1 JavaScript 自定义方法区==========
  },
  //1.初始化页面调用方法(dom元素绑定后再执行初始化数据操作)
  mounted() {
    this.getDetail();

  }
};
</script>

<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
  padding: 10px;
  box-sizing: border-box;

  .search-wrap /deep/ {
    .el-form-item__label {
      height: 32px;
      line-height: 32px;
    }

    .el-form-item__content {
      height: 32px;
      line-height: 32px;
      width: 150px;
    }

    .el-input--mini .el-input__inner {
      height: 32px;
      line-height: 32px;
    }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 150px;
    }
  }

  /* 多日期样式重置 */
  .el-dater /deep/ .el-form-item__content {
    width: 330px;
  }

  /* 通用工具部分样式 */
  .tool-wrap {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;

    .left-area {
      float: left;
      width: 50%;
      text-align: left;

      button {
        margin-right: 15px;
        border-radius: 5px;
      }
    }

    .right-area {
      float: right;
      width: 50%;
      text-align: right;
    }
  }

  /* 表格部分样式 */
  .table-wrap {
    width: 100%;
    max-height: 600px;
    margin-top: 20px;
  }

  /* 弹窗样式 */
  .dialog-wrap /deep/ .el-dialog__footer {
    text-align: center !important;
  }
}
</style>
